<template>
  <div
    class="kanban-container"
    :style="{ right: isCollapsed ? '-360px' : '0' }"
  >
    <i
      class="toggle"
      :class="isCollapsed ? 'el-icon-caret-left' : 'el-icon-caret-right'"
      @click="toggleCollapsed"
    ></i>
    <div>
      <treeselect
        v-model="queryParams.deptId"
        :options="deptOptions"
        :disable-branch-nodes="false"
        :show-count="true"
        placeholder="请选择归属部门"
        :defaultExpandLevel="2"
        class="search-treeselect"
        style="width: 320px; margin: 0 15px"
        :appendToBody="true"
        @input="refreshAllData"
      />
    </div>
    <div class="kanban-box">
      <div class="title"><i class="title-indent"></i><span>人员情况</span></div>

      <div class="content">
        <el-row :gutter="20">
          <el-col :span="13">
            <pie-chart-online-rate
              :chart-data="
                personCount.totalCount
                  ? parseInt(
                      (
                        personCount.onlineCount / personCount.totalCount
                      ).toFixed(2) * 100
                    )
                  : 0
              "
              height="120px"
            />
            <div style="display: flex; justify-content: center">
              <span style="margin-right: 5px">在线人数</span>
              <span class="online-number">{{ personCount.onlineCount }}</span
              >/<span style="margin-right: 5px">总人数</span
              ><span class="total-number">{{ personCount.totalCount }}</span>
            </div>
            <pie-chart-work-online-rate
              :chart-data="
                workPersonCount.workPerson > 0
                  ? parseInt(
                      (
                        workPersonCount.onlineStatus /
                        workPersonCount.workPerson
                      ).toFixed(2) * 100
                    )
                  : 0
              "
              height="120px"
            />
            <div style="display: flex; justify-content: center">
              <span style="margin-right: 5px">当班在线数</span>
              <span class="online-number">{{
                workPersonCount.onlineStatus
              }}</span
              >/<span style="margin-right: 5px">当班数</span
              ><span class="total-number">{{
                workPersonCount.workPerson
              }}</span>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="person-table">
              <div
                v-for="(person, index) in personList"
                :key="index"
                class="row-content"
                :class="index % 2 == 0 ? 'even-row' : 'odd-row'"
              >
                <div>{{ person.personTypeName }}</div>
                <div>
                  <span class="online-number">{{
                    person.totalOnlinePerson
                  }}</span
                  >/<span class="total-number">{{ person.totalPerson }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="kanban-box">
      <div class="title"><i class="title-indent"></i><span>车辆情况</span></div>
      <div style="display: flex; justify-content: center">
        <span style="margin-right: 5px">在线车辆数</span>
        <span class="online-number">{{
          carList.reduce((acc, car) => acc + parseInt(car.totalOnlineCar), 0)
        }}</span
        >/<span style="margin-right: 5px">总车辆数</span
        ><span class="total-number">{{
          carList.reduce((acc, car) => acc + parseInt(car.totalCar), 0)
        }}</span>
      </div>

      <div class="content">
        <bar-chart
          :chart-data="carList"
          height="180px"
          width="100%"
        ></bar-chart>
      </div>
    </div>
    <div class="kanban-box" v-if="fac">
      <div class="trash-board">
        <div>
          <div style="margin: 5px 0">垃圾桶在线率</div>
          <div class="online-rate">
            {{
              fac.onlineFac
                ? ((fac.onlineFac * 100) / fac.totalFac).toFixed()
                : ""
            }}%
          </div>
        </div>
        <div class="flex">
          <div class="trash-wrap">
            <i
              class="el-icon-delete-solid"
              style="color: #26bc96; font-size: 22px"
            ></i>
          </div>
          <div style="padding-left: 15px">
            <div style="margin: 5px 0">垃圾桶</div>

            <div class="online-count">
              <span class="online-number" style="color: #fff">{{
                fac.onlineFac
              }}</span
              ><span style="color: #fff">/{{ fac.totalFac }}</span>
            </div>
          </div>
        </div>
        <div>
          <div style="margin: 5px 0">垃圾桶满溢率</div>
          <div class="online-rate">
            {{
              fac.fullFac ? ((fac.fullFac * 100) / fac.totalFac).toFixed() : ""
            }}%
          </div>
        </div>
      </div>
    </div>
    <div class="kanban-box">
      <div class="title"><i class="title-indent"></i><span>告警信息</span></div>
      <dv-scroll-board
        class="alarm-scroll-table"
        :config="alarmList"
        style="width: 340px; height: 400px"
      />
    </div>
  </div>
</template>

<script>
import { homeStatistics, homeAlarm } from "@/api/lsd/lsd";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { treeselect } from "@/api/system/dept";

import PieChartWithTooltip from "./PieChartWithTooltip";
import PieChartOnlineRate from "./PieChartOnlineRate";
import PieChartWorkOnlineRate from "./PieChartWorkOnlineRate";

import PieAlarmChart from "./PieAlarmChart";
import BarChart from "./BarChart";
import LineAlarmChart from "./LineAlarmChart";

import dayjs from "dayjs";

export default {
  name: "kanban",
  components: {
    Treeselect,
    PieChartWorkOnlineRate,
    PieChartOnlineRate,
    PieAlarmChart,
    BarChart,
    LineAlarmChart,
  },
  props: {
    isCollapsed: {
      type: Boolean,
      default: false,
    },
  },
  dicts: ["alarm_type"],

  data() {
    return {
      timer: null,
      queryParams: {
        deptId: null,
      },
      deptOptions: [],
      personList: [
        {
          personType: "cleaning_and_sanitation",
          personTypeName: "保洁环卫",
          totalOfflinePerson: "36",
          totalOnlinePerson: "12",
          totalPerson: "48",
        },
      ],
      personCount: { onlineCount: 1, totalPerson: 5 },
      workPersonCount: { onlineStatus: 1, workPerson: 5 },
      carList: [
        {
          carType: "Compression_transfer_vehicle",
          carTypeName: "压缩转运车",
          totalCar: "3",
          totalOfflineCar: "3",
          totalOnlineCar: "0",
        },
      ],
      fac: null,
      barChartData: [
        { alarmCount: 152, alarmName: "人员出区域" },
        { alarmCount: 240, alarmName: "人员进区域" },
        { alarmCount: 95, alarmName: "车辆出区域" },
        { alarmCount: 100, alarmName: "车辆进区域" },
        { alarmCount: 59, alarmName: "满溢告警" },
      ],
      lineChartData: [],
      alarmList: {
        header: ["告警对象", "告警信息", "时间"],
        headerBGC: "rgba(60, 60, 60, 0.21);",
        oddRowBGC: "rgba(160, 160, 160, 0.09);",
        evenRowBGC: "rgba(10, 39, 50, 0.09);",
        data: [
          [
            "<span style='width:10px;height:10px;display:inline-block;border-radius:50%;background-color:#00ff91;vertical-align: middle;'></span><span style='font-size:10px'>1号垃圾桶</span>",
            "<span style='font-size:10px'>桶满</span>",
            "<span style='font-size:10px'>2022-03-23 07:55:02</span>",
          ],
        ],
      },
    };
  },
  computed: {},
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
        this.queryParams.deptId = response.data[0].id;
      });
    },
    toggleCollapsed() {
      this.$emit("update:isCollapsed", !this.isCollapsed);
    },
    getStatistics() {
      homeStatistics({ deptId: this.queryParams.deptId }).then((response) => {
        let statistics = response.data;
        if (statistics.fac) {
          this.fac = statistics.fac;
        }
        this.personList = statistics.person;
        this.personCount.onlineCount = statistics.person.reduce((pre, cur) => {
          return pre + parseInt(cur.totalOnlinePerson);
        }, 0);
        this.personCount.totalCount = statistics.person.reduce((pre, cur) => {
          return pre + parseInt(cur.totalPerson);
        }, 0);

        this.carList = statistics.car;
        this.workPersonCount = statistics.workPersonCount;

        if (statistics.facAlarm) {
          this.lineChartData = statistics.facAlarm;
        }
      });
    },
    getAlarmList() {
      homeAlarm({
        beginTime: dayjs(
          dayjs()
            .add(-1, "day")
            .set("hour", 0)
            .set("minute", 0)
            .set("second", 0).$d
        ).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(
          dayjs().set("hour", 23).set("minute", 59).set("second", 59).$d
        ).format("YYYY-MM-DD HH:mm:ss"),
        deptId: this.queryParams.deptId,
      }).then((res) => {
        let alarmList = [
          ...res.data.facAlarm.map((v) => {
            return {
              alarmName: " 桶满",
              dataTime: v.dataTime,
              address: v.address,
              type: "fac",
              name: v.facilityName,
            };
          }),

          ...res.data.personAlarm.map((v) => {
            return {
              alarmName: this.selectDictLabel(
                this.dict.type.alarm_type,
                v.alarmType
              ),
              dataTime: v.eventStart,
              address: v.address,
              type: "person",
              name: v.personName,
            };
          }),
        ];
        this.alarmList = {
          header: ["告警对象", "告警信息", "时间"],
          headerBGC: "rgba(60, 60, 60, 0.21);",
          oddRowBGC: "rgba(160, 160, 160, 0.09);",
          evenRowBGC: "rgba(10, 39, 50, 0.09);",
          columnWidth: [120, 120, 150],
          data: alarmList.map((v) => {
            return [
              `<span style='width:8px;height:8px;display:inline-block;border-radius:50%;background-color:#00ff91;vertical-align: middle;margin-right:3px;'></span><span style='font-size:10px'>${v.name}</span>`,
              `<span style='font-size:10px'>${v.alarmName}</span>`,
              `<span style='font-size:10px'>${v.dataTime}</span>`,
            ];
          }),
        };
      });
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    routeToAlarm(item) {
      if (item.type == "fac") {
        this.$router.push({
          name: "FacHistory",
          params: {
            facilityName: item.name,
          },
        });
      } else {
        this.$router.push({
          name: "PersonHistory",
          params: {
            personName: item.name,
          },
        });
      }
    },
    refreshAllData() {
      this.getStatistics();
      this.getAlarmList();
    },
  },
  created() {
    this.getTreeselect();
  },

  mounted() {
    this.getStatistics();
    this.getAlarmList();
    // let _this = this;
    // this.timer = setInterval(function () {
    //   _this.getStatistics();
    // }, 15000);
  },
  beforeDestroy() {
    this.clearTimer();
  },
};
</script>
<style lang="scss">
.alarm-scroll-table {
  .header {
    color: rgb(0, 255, 192);
    font-size: 14px;
  }
}
</style>
<style lang="scss" scoped>
.kanban-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 375px;
  height: 100%;

  padding: 12px;
  // background: rgba(20, 69, 143, 0.84);
  // background: linear-gradient(
  //   0deg,
  //   rgba(14, 30, 77, 0.78),
  //   rgba(20, 69, 143, 0.84)
  // );
  background-color: rgb(48, 48, 48);
  opacity: 0.5;

  opacity: 1;
  color: #fff;
  font-size: 12px;
  transition: right 1s;

  z-index: 999;

  .toggle {
    position: absolute;
    left: -2px;
    top: 50%;
    color: #fff;
    opacity: 0.4;
    cursor: pointer;
    font-size: 16px;
  }

  .kanban-box {
    margin-bottom: 8px;
    padding: 5px 10px;
    pointer-events: auto;
    background: rgba(60, 60, 60, 0.26);
    // opacity: 0.5;

    .flex {
      display: flex;
      align-items: center;
    }

    .title {
      padding-left: 5px;
      height: 35px;
      line-height: 35px;
      display: flex;
      align-items: center;
      font-weight: normal;
      font-family: "Microsoft Yahei", Arial, "sans-serif";
      font-size: 16px;
      color: #fff;
      margin: 0;

      .title-indent {
        display: inline-block;
        width: 4px;
        height: 15px;
        pointer-events: auto;
        border: none;
        border-radius: 0px;
        background: rgb(0, 255, 192);
        margin-right: 10px;
      }
    }

    .content {
      padding: 5px 10px;

      .person-table {
        .row-content {
          vertical-align: middle;
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 14px;
          line-height: 35px;
        }

        .odd-row {
          background-color: rgba(10, 39, 50, 0);
        }

        .even-row {
          background-color: rgba(60, 60, 60, 0.21);
        }
      }
    }

    .total-number {
      color: #00ffc0;
      text-align: center;
      white-space: nowrap;
      justify-content: flex-start;
      font-family: DIN;
      font-size: 16px;
      font-weight: 700;
    }

    .online-number {
      color: #6ecd8e;
      text-align: center;
      white-space: nowrap;
      justify-content: flex-start;
      font-family: DIN;
      font-size: 19px;
      font-weight: 700;
      margin-right: 1px;
    }

    .trash-board {
      display: flex;
      justify-content: space-between;

      .trash-wrap {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background: rgba(38, 188, 150, 0.15);
        display: flex;
        justify-content: center; //x轴排列
        align-items: center; //y轴排列
      }

      .online-rate {
        color: rgba(255, 255, 255, 0.8);
        height: 32px;
        line-height: 32px;
        font-size: 24px;
        font-family: "DINPro";
      }
    }
  }
}
</style>
